<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拼多多 - 手写MyBatis：渐进式源码实践</title>
    <link rel="stylesheet" href="css/format.css">
    <link rel="stylesheet" href="css/login.css">
</head>
<body>
<div class="container">
    <!-- 轮播图 -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="https://bugstack.cn/images/article/product/book/mybatis-03.png?raw=true" alt="手写MyBatis">
            </div>
            <div class="swiper-slide">
                <img src="https://bugstack.cn/images/article/product/book/mybatis-03.png?raw=true" alt="手写MyBatis">
            </div>
            <div class="swiper-slide">
                <img src="https://bugstack.cn/images/article/product/book/mybatis-03.png?raw=true" alt="手写MyBatis">
            </div>
        </div>
        <div class="swiper-indicator">
            <div class="swiper-dot active"></div>
            <div class="swiper-dot"></div>
            <div class="swiper-dot"></div>
        </div>
    </div>

    <!-- 商品信息 -->
    <div class="product-info">
        <h1 class="product-title" id="product-title">手写MyBatis：渐进式源码实践（全彩）</h1>
        <div class="promotion">
            <span class="promotion-tag">大促优惠</span>
            <span class="promotion-text" id="promotion-text">直降￥0，0人在抢，参与马上抢到</span>
        </div>
        <div class="price-section">
            <span class="current-price" id="current-price">￥0</span>
            <span class="original-price" id="original-price">￥0</span>
        </div>
    </div>

    <!-- 拼团信息 -->
    <div class="group-buy-section">
        <h2 class="section-title">拼单即将结束</h2>
        <div class="group-list" id="group-list">
            <!-- 团队列表将动态生成 -->
        </div>
    </div>

    <!-- 底部操作栏 -->
    <div class="bottom-bar">
        <button class="action-btn">
            <span class="icon">❤</span>
            <span>收藏</span>
        </button>
        <button class="action-btn">
            <span class="icon">🛒</span>
            <span>购物车</span>
        </button>
        <div class="buy-btns">
            <button class="solo-buy" id="solo-buy">单独购买</button>
            <button class="group-buy" id="group-buy">开团购买</button>
        </div>
    </div>

    <!-- 支付页面 -->
    <div class="payment-page" id="payment-page">
        <div class="payment-header">请扫码支付</div>
        <div class="payment-amount" id="payment-amount">支付金额 ¥40</div>
        <div class="qrcode-container">
            <div class="qrcode-placeholder">
                <div>二维码</div>
                <div>(模拟支付界面)</div>
            </div>
        </div>
        <div class="payment-actions">
            <button class="cancel-btn" id="cancel-payment">取消支付</button>
            <button class="confirm-btn" id="confirm-payment">支付完成</button>
        </div>
    </div>

    <!-- 登录弹窗 -->
    <div class="login-overlay" id="login-overlay">
        <div class="login-container">
            <button class="login-close-btn" id="login-close-btn">×</button>
            <div class="login-header">
                <div class="login-pdd-logo">
                    <span>拼</span>
                    <span>多</span>
                    <span>多</span>
                </div>
                <h1 class="login-title">欢迎登录</h1>
                <p class="login-subtitle">小傅哥拼团</p>
            </div>

            <form class="login-form" id="login-form">
                <div class="login-form-group">
                    <label class="login-form-label" for="login-username">用户名</label>
                    <input type="text" id="login-username" class="login-form-input" placeholder="请输入用户名">
                    <span class="login-input-icon">👤</span>
                    <div class="login-form-error" id="login-username-error">用户名只能是中文、英文、数字的组合</div>
                </div>
                <div class="login-form-group">
                    <label class="login-form-label" for="login-password">密码</label>
                    <input type="password" id="login-password" class="login-form-input" placeholder="请输入6位数字密码">
                    <span class="login-input-icon">🔒</span>
                    <div class="login-form-error" id="login-password-error">密码必须是6位数字</div>
                </div>
                <button type="submit" class="login-btn">登录</button>
                <div class="login-tips">登录后即可参与拼团购买</div>
            </form>
        </div>
    </div>

    <!-- Toast提示 -->
    <div class="login-toast" id="login-toast"></div>

    <!-- 加载中提示 -->
    <div class="loading" id="loading">加载中...</div>
</div>

<script src="js/index.js"></script>
</body>
</html>